<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <br>
    <el-card>
      <div>
        <el-table
          ref="table"
          border
          stripe
          :data="list"
          style="width: 100%">
          <el-table-column
            prop="id"
            label="订单编号">
          </el-table-column>
          <el-table-column
            prop="goodName"
            label="类别编号"
          ></el-table-column>
          <el-table-column
            prop="userId"
            label="购买者编号"
          ></el-table-column>
          <el-table-column
            prop="price"
            label="订单金额"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
          ></el-table-column>
          <el-table-column
            prop="status"
            label="订单状态"
          >
            <template slot-scope="x">
              <p v-if="x.row.state==1">已支付</p>
              <p v-if="x.row.state==0" style="color: red">未支付</p>
              <p v-if="x.row.state==2" style="color: green">已完成</p>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            label="操作"
          >
            <!--已完成的订单和未支付的订单可以删除，已支付的订单必须完成后才能删除-->
            <template slot-scope="scope">
              <p v-if="scope.row.state==1">
                <el-button type="primary" icon="el-icon-finished" size="mini" @click="finishOrder(scope.row.id)">完成</el-button>
              </p>
              <p v-if="scope.row.state==0">
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeOne(scope.row.id)">删除</el-button>
              </p>
              <p v-if="scope.row.state==2">
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeOne(scope.row.id)">删除</el-button>
              </p>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :page-size.sync="pageSize"
          :page-sizes="pageSizes"
          :current-page.sync="currentPage"
          background

          @current-change="handleCurrentChange"
          layout="sizes, prev, pager, next, jumper, ->, total"
          :total="total">
        </el-pagination>
      </div>
    </el-card>


  </div>
</template>

<script>
    export default {
        name: "Orders",
      data(){
        return{
          list:[],
          pageSize:5,
          pageSizes:[5],
          currentPage:1,
          total:1,
          addDialogVisible:false,
          updateDialogVisible:false,
          order:{}
        }
      },
      created() {
        this.handleAClick(1);
      },
      methods:{
        handleAClick(i){
          this.axios.get("/ZuaMarket/Order/orders?pageNum="+i).then(resp => {
            let data = resp.data;
            this.list = data.list;
            this.total = data.total;

          })
        },
        handleCurrentChange(page){
          this.handleAClick(page);
        },
        finishOrder(i){
          this.axios.get("/ZuaMarket/Order/finishOrder/"+i).then(resp => {
            let data = resp.data;
            let state = data.state
            console.log(state)
            if(state=="success"){
              this.$message({
                message: '订单已完成',
                type: 'success'
              });
            }
            this.handleAClick(this.currentPage);
          })
        },
        removeOne(i){
          let isDelete = confirm("确定删除吗?");
          if (!isDelete) {
            return;
          }
          this.axios.delete("/ZuaMarket/Order/order/"+i).then(resp => {
            let responseData = resp.data;
            console.log(responseData);
            if (responseData.state == "success") {
              alert("删除成功");
              this.handleAClick(this.currentPage);
            } else {
              alert("删除失败");
            }
          }).catch(err => {
            console.log(err);
          })
        }
      }
    }
</script>
<style scoped>
</style>
